<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>30-2D变换作业-none</title>
		<link rel="stylesheet" href="../css/node-public.css">
	</head>
	<body>
		
		<div id="box">
			<h1>30-2D变换作业-none</h1>
			<a href="../confused is Blog/confused is Blog.html">首页</a>
		</div>
		<div id="main-box">
			<ul>
				<li>
					<h2>盒模型的解析模式</h2>
					<span>box-sizing   盒模型的解析模式
			content-box   标准盒模型
				定义的width和height是内容区域的大小
				padding和边框在内容区域外部

			border-box    怪异盒模型
				定义的width和height是整个盒子的大小
				padding和边框在盒子内部产生，会挤压内容区域
		
		标准盒模型占位 = width/height + padding + border + margin
		标准盒模型大小 = width/height + padding + border
			
		怪异盒模型占位 = width/height + margin
		怪异盒模型大小 =  width/height

		浏览器的前缀：
			IE:   -ms-
			谷歌： -webkit-
			欧朋：  -o-
			火狐：  -moz-
		加前缀都是给属性最前面加
		css3属性：
			transtion
			animation
			-webkit-@keyframes
			box-shadow
			text-shadow
		</span>
				</li>
				<li>
					<h2>calc</h2>
					<span>calc()    通用的数学运算规则
			 + - * /
			要求：运算符号前后必须是有空格
			要是乘除那么后一个值不要带单位
		</span>
				</li>
				<li>
					<h2>transform</h2>
					<span>transform   变换
			rotate()   旋转
				rotateX  水平翻转
				rotateY   垂直翻转
			translate(X, Y )   位移
			skew(x,y)   斜切
			scale()    缩放

		deg  度数
			正值  顺时针
			负值  逆时针
		</span>
				</li>
				<li>
					<h2>transform 顺序</h2>
					<span>scale放在最后
		</span>
				</li>
			</ul>
	</body>
</html>
